<template>
    <div>
        <div style="width: 35%; height: 450px;" ref="pieChart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'StoreLeaveChart',

    data() {
        return {
            list: [],
            myChart: null,
            option: {
                tooltip: {
                    trigger: 'item'
                },

                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '余额',
                        type: 'pie',
                        radius: '50%',
                        data: [],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ],
                color: ['#8dcfff', '#f97b72', '#fdd57f', '#74dbef', '#ff9f7f', '#9fd2cf']
            }
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.myChart = echarts.init(this.$refs.pieChart);
            this.myChart.setOption(this.option);
        },
        updateChart() {
            const pieData = this.list.map(item => ({
                value: item.presentMoney,
                name: item.accountName
            }));
            this.option.series[0].data = pieData;
            this.myChart.setOption(this.option);
        },
        getAccounts() {
            this.axios({
                url: "/info/account/selectAll"
            }).then(rs => {
                this.list = rs.data.accounts;
                this.updateChart();
            }).catch(error => {
                console.error('Error fetching data:', error);
            });
        }
    },
    created() {
        this.getAccounts();
    }
}
</script>